<template>
  <div class="blog">
    <h1 class="page-title">{{ $t('nav.blog') }}</h1>

    <div class="blog-container">
      <!-- 博客搜索和筛选 -->
      <div class="blog-filters">
        <el-input
          v-model="searchQuery"
          :placeholder="$t('blog.searchPlaceholder')"
          class="search-input"
          clearable
          @input="handleFiltersChange"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-select
          v-model="selectedCategory"
          :placeholder="$t('blog.categoryPlaceholder')"
          class="category-select"
          clearable
          @change="handleFiltersChange"
        >
          <el-option
            v-for="category in categories"
            :key="category"
            :label="category"
            :value="category"
          />
        </el-select>

        <el-select
          v-model="selectedTag"
          :placeholder="$t('blog.tagPlaceholder')"
          class="tag-select"
          clearable
          @change="handleFiltersChange"
        >
          <el-option
            v-for="tag in tags"
            :key="tag"
            :label="tag"
            :value="tag"
          />
        </el-select>
      </div>

      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading-container">
        <el-skeleton :rows="3" animated />
        <el-skeleton :rows="3" animated />
        <el-skeleton :rows="3" animated />
      </div>

      <!-- 博客文章列表 -->
      <div v-else-if="filteredArticles.length > 0" class="blog-grid">
        <blog-card
          v-for="article in filteredArticles"
          :key="article.id"
          :article="article"
          @click="navigateToArticle(article.slug)"
        />
      </div>

      <!-- 无结果提示 -->
      <el-empty 
        v-else 
        :description="$t('blog.noArticlesFound')"
        :image-size="200"
      >
        <el-button @click="resetFilters">{{ $t('blog.resetFilters') }}</el-button>
      </el-empty>

      <!-- 分页 -->
      <div v-if="totalArticles > 0" class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[6, 12, 24]"
          :total="totalArticles"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useBlogStore } from '@/stores/blog'
import BlogCard from '@/components/blog/BlogCard.vue'

const router = useRouter()
const blogStore = useBlogStore()

// 搜索和筛选状态
const searchQuery = ref('')
const selectedCategory = ref('')
const selectedTag = ref('')
const currentPage = ref(1)
const pageSize = ref(6)
const totalArticles = ref(0)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const filteredArticles = ref<any[]>([])
const isLoading = computed(() => blogStore.isLoading)

// 获取分类和标签列表
const categories = computed(() => blogStore.categories)
const tags = computed(() => blogStore.tags)

// 加载文章数据
const loadArticles = async () => {
  const result = await blogStore.filterArticles({
    search: searchQuery.value,
    category: selectedCategory.value,
    tag: selectedTag.value,
    page: currentPage.value,
    pageSize: pageSize.value
  })
  
  filteredArticles.value = result.articles
  totalArticles.value = result.total
}

// 处理筛选条件变化
const handleFiltersChange = () => {
  currentPage.value = 1 // 重置到第一页
  loadArticles()
}

// 重置筛选条件
const resetFilters = () => {
  searchQuery.value = ''
  selectedCategory.value = ''
  selectedTag.value = ''
  currentPage.value = 1
  loadArticles()
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadArticles()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadArticles()
}

// 导航到文章详情
const navigateToArticle = (slug: string) => {
  router.push(`/blog/${slug}`)
}

// 监听路由变化，重新加载数据
watch(() => router.currentRoute.value.query, () => {
  loadArticles()
}, { deep: true })

// 初始化加载数据
onMounted(() => {
  // 从URL参数中获取筛选条件
  const query = router.currentRoute.value.query
  if (query.search) searchQuery.value = query.search as string
  if (query.category) selectedCategory.value = query.category as string
  if (query.tag) selectedTag.value = query.tag as string
  if (query.page) currentPage.value = parseInt(query.page as string) || 1
  
  // 加载文章数据
  blogStore.loadArticles().then(() => {
    loadArticles()
  })
})
</script>

<style scoped>
.blog {
  padding: 40px 0;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.category-select,
.tag-select {
  width: 200px;
}

.loading-container {
  margin: 40px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .blog-filters {
    flex-direction: column;
  }

  .search-input,
  .category-select,
  .tag-select {
    width: 100%;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }
}
</style>